<template>
    <div class='app-content customer-registration'>
        <div class="app-view">
            <van-field 
                v-model="form.mobile"
                label-width="1.9rem" 
                type="number"
                placeholder="请输入手机号码（11位）"
                clearable
            >
                <template #left-icon>
                    <i class="iconfont icon-shouji"></i>
                </template>
                <template #label>
                    <country-code v-model="form.countryCode"></country-code>
                </template>
                <template #extra>
                    <div class="char-label">
                        <ul>
                            <li class="new">
                                <span>新</span>
                            </li>
                            <li class="visited">
                                <span>来访</span>
                            </li>
                        </ul>
                    </div>
                </template>
            </van-field>
        </div>
        <div class="app-view">
            <van-cell-group>
                <van-field 
                    v-model="form.name"
                    label-width="1.9rem" 
                    label="客户姓名" 
                    placeholder="请输入客户姓名"
                    clearable
                >
                    <template #left-icon>
                        <i class="iconfont icon-yonghu"></i>
                    </template>
                    <template #extra>
                        <div class="sex">
                            <van-radio-group v-model="form.sex" direction="horizontal">
                                <van-radio name="男" :class="form.sex == '男'?'isChecked':''">男</van-radio>
                                <van-radio name="女" :class="form.sex == '女'?'isChecked':''">女</van-radio>
                            </van-radio-group>
                        </div>
                    </template>
                </van-field>
                <van-field 
                    v-model="form.source"
                    label-width="1.9rem" 
                    label="客户来源" 
                    placeholder="请选择"
                    right-icon="arrow"
                    readonly
                >
                    <template #left-icon>
                        <i class="iconfont icon-laiyuan"></i>
                    </template>
                </van-field>
                <van-field 
                    v-model="form.from"
                    label-width="1.9rem" 
                    label="认知途径" 
                    placeholder="请选择"
                    right-icon="arrow"
                    readonly
                >
                    <template #left-icon>
                        <i class="iconfont icon-lujing"></i>
                    </template>
                </van-field>
                <van-field 
                    v-model="form.num"
                    label-width="1.9rem" 
                    label="来访人数" 
                    placeholder="请输入来访人数"
                    type="number"
                    clearable
                >
                    <template #left-icon>
                        <i class="iconfont icon-renshu"></i>
                    </template>
                </van-field>
                <van-field 
                    v-model="form.memo"
                    label-width="1.9rem" 
                    label="备注信息" 
                    placeholder="请输入备注"
                    clearable
                >
                    <template #left-icon>
                        <i class="iconfont icon-beizhu"></i>
                    </template>
                </van-field>
            </van-cell-group>
        </div>
        <div class="choose-consultant">
            <div class="consultant">
                <div class="have-adviser-tips">
                    <span class="text">该客户有原归属，点击头像查看</span>
                </div>
                <avatar class="photo" :src="form.consultant.photo"></avatar>
                <div class="choose">
                    <div class="unChoose" v-if="!form.consultant.id" @click="staffsView=true">请选择顾问</div>
                    <div class="choosed" v-else>选定顾问：{{form.consultant.name}}</div>
                </div>
            </div>
            <div class="button">
                <van-button type="primary" @click="registrate">登记</van-button>
            </div>
        </div>
        <van-popup 
            v-model="staffsView" 
            position="bottom" 
            :style="{width:'100%',height:'80%'}"
            get-container="body"
            round
        >
            <staffs></staffs>
        </van-popup>
    </div>
</template>

<script>
import CountryCode from "@/components/CountryCode/index.vue";
import avatar from "@/components/Avatar/index.vue";
import staffs from "./staffs.vue"
export default {
    name: '',
    data() { 
        return {
            staffsView:false,
            defaultPhoto:require("@/assets/images/default-photo.png"),
            form:{
                consultant:{
                    id:"",
                    photo:"",
                    name:""
                }
            },
        }
    },
    props: {

    },
    components:{
        CountryCode,
        avatar,
        staffs
    },
    mounted() {

    },
    methods:{
        registrate(){
            //根据实际业务判断
            this.$dialog.confirm({
                title: '本次接待是否为义务接待',
                message: '义务接待不改变客户归属\n非义务接待是否改变归属已项目规定为准\n本次接待不影响顾问的轮排顺序',
            })
            .then(() => {
                this.$router.push({
                    path:"/registration/success"
                })
            })
            .catch(() => {
                // on cancel
            });
            
        }
    },
}
</script>

<style lang='scss' scoped>
.customer-registration{
    margin-top:0.9rem;
    .char-label{
        width:7rem;
        padding-left:0.3rem;
        box-sizing: border-box;
        ul{
            white-space: nowrap;
            font-size:0;
            li{
                display:inline-block;
                vertical-align: middle;
                padding-left:0.12rem;
                position:relative;
                &:before{
                    content:"";
                    border:0.12rem solid transparent;
                    position:absolute;
                    left:-0.12rem;
                    top:50%;
                    transform: translateY(-50%);
                }
                span{
                    display:block;
                    height:0.6rem;
                    padding:0 0.25rem;
                    line-height: 0.65rem;
                    border-radius: 5px;
                    font-size:0.3rem;
                }
            }
            li+li{
                margin-left:0.3rem;
            }
        }
    }
    .van-radio-group{
        .van-radio{
            width:1rem;
            height:0.8rem;
            margin:0;
            margin-left:0.3rem;
            justify-content: center;
            border-radius: 5px;
            /deep/.van-radio__icon{
                display:none;
            }
            /deep/.van-radio__label{
                margin:0;
                font-size:0.34rem;
            }
        }
    }
}
.choose-consultant{
    position:fixed;
    width:100%;
    left:0;
    bottom:0;
    display:flex;
    align-items: center;
    height:1.8rem;
    .consultant{
        flex:1;
        height:100%;
        background-color:#fff;
        box-shadow: 0px 0px 0.2rem 0px rgba(0, 0, 0, 0.1);
        .photo{
            position:absolute;
            left:0.5rem;
            bottom:0.3rem;
            width:2.58rem;
            height:2.58rem;
        }
        .choose{
            position:absolute;
            left:3.4rem;
            top:50%;
            transform: translateY(-50%);
            font-size:0.34rem;
        }
        .have-adviser-tips{
            position:absolute;
            bottom:3.4rem;
            left:1.3rem;
            font-size:0.3rem;
            white-space: nowrap;
            background-color:#f6b300;
            padding:8px 10px;
            border-radius: 4px;
            color:#fff;
            &:before{
                content:"";
                border:0.15rem solid transparent;
                border-top-color:#f6b300;
                position:absolute;
                left:0.4rem;
                top:100%;
            }
        }
    }
    .button{
        flex:1;
        height:100%;
        .van-button{
            height:100%;
            width:100%;
            font-size:0.48rem;
        }
    }
}
</style>